<script setup lang="ts">
import { reactive } from "vue";
import { ref } from "vue";
import dayjs from 'dayjs';
import type { DateDataType } from "./index.d";
import { useSettingStore } from "@/stores/index";
import { ElSelect, ElOption } from "element-plus";
import jiantou1 from '@/assets/jiantou1.png';
import xuanzhong from '@/assets/xuanzhong.png'

const dateData = reactive<DateDataType>({
  dateDay: "",
  dateYear: "",
  dateWeek: "",
  timing: null
});

const { setSettingShow } = useSettingStore();
const weekday = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];

const timeFn = () => {
  dateData.timing = setInterval(() => {
    dateData.dateDay = dayjs().format("YYYY-MM-DD hh : mm : ss");
    dateData.dateWeek = weekday[dayjs().day()];
  }, 1000);
};
setSettingShow(false) // 设置
const selectedYear = ref("2024年"); // 存储选择的年份

// 获取当前年份范围
const currentYear = new Date().getFullYear();
const yearRange = Array.from({ length: 20 }, (_, i) => currentYear - i); // 从当前年份往前推 20 年

const selectedPosition = ref("集团审计部门");  // 用来存储选中的岗位
// 岗位信息，静态数据
const positions = [
  { label: "集团审计部门", value: "集团审计部门" },
  { label: "集团董事会部门", value: "集团董事会部门" },
];

// timeFn();
</script>

<template>
  <div class="btn_f">
    <router-link to="/home/index" class="btn-container" :class="{'router-link-active': $route.path === '/home/index'}">
      <img :src="$route.path === '/home/index' ? xuanzhong : jiantou1" class="btn" />
      <span class="btn-text">总体情况</span>
    </router-link>

    <router-link to="/home/tracking" class="btn-container" :class="{'router-link-active': $route.path === '/home/tracking'}">
      <img :src="$route.path === '/home/tracking' ? xuanzhong : jiantou1" class="btn" />
      <span class="btn-text">计划跟踪</span>
    </router-link>

    <router-link to="/home/statistics" class="btn-container" :class="{'router-link-active': $route.path === '/home/statistics'}">
      <img :src="$route.path === '/home/statistics' ? xuanzhong : jiantou1" class="btn" />
      <span class="btn-text">问题统计</span>
    </router-link>

    <router-link to="/home/rectification" class="btn-container" :class="{'router-link-active': $route.path === '/home/rectification'}">
      <img :src="$route.path === '/home/rectification' ? xuanzhong : jiantou1" class="btn" />
      <span class="btn-text">整改成效</span>
    </router-link>

    <router-link to="/home/resource" class="btn-container" :class="{'router-link-active': $route.path === '/home/resource'}">
      <img :src="$route.path === '/home/resource' ? xuanzhong : jiantou1" class="btn" />
      <span class="btn-text">资源分布</span>
    </router-link>

    <router-link to="/home/audit" class="btn-container" :class="{'router-link-active': $route.path === '/home/audit'}">
      <img :src="$route.path === '/home/audit' ? xuanzhong : jiantou1" class="btn" />
      <span class="btn-text">审计覆盖</span>
    </router-link>
  </div>

  <div class="d-flex jc-center title_wrap">
    <div class="zuojuxing"></div>
    <div class="youjuxing"></div>
    <div class="guang"></div>
    <div class="d-flex jc-center">
      <!-- 中间 -->
      <div class="title_logo">
        <div class="title">
        <span class="title-text">人保审计业务管理平台</span>
        </div>
        <div class="logo">
          <img class="img1" src="@/assets/renbao.png" alt="logo" />
        </div>
      </div>
      <!-- 右侧 -->
      <div class="btn-right">
        <img src="@/assets/jiantou2.png" class="btn_r" />
        <span class="btn-text_r">子公司概况</span>
        <!--"子公司概况" -->
        <div class="additional-content">
          <!-- 年份 -->
          <el-select v-model="selectedYear" placeholder="请选择年份" class="input-field1">
            <el-option 
              v-for="year in yearRange" 
              :key="year" 
              :label="year.toString() + '年'" 
              :value="year" 
            />
          </el-select>
          <!-- 岗位 -->
          <el-select v-model="selectedPosition" placeholder="请选择岗位" class="input-field2">
            <el-option 
              v-for="position in positions" 
              :key="position.value" 
              :label="position.label" 
              :value="position.value" 
            />
          </el-select>
          <span class="text-label">李玲玉</span>
          <button class="img-button">
            <img src="@/assets/jinruxitong.png" alt="按钮" />
          </button>
        </div>
      </div>
    </div>
  </div>
  <!-- <div class="setting_icon"   @click="setSettingShow(true)">
      <img src="@/assets/img/headers/setting.png" alt="设置">
  </div> -->
</template>

<style scoped lang="scss">
.title_wrap {
  margin-left: 50px;
  height: 60px;
  background-size: cover;
  background-position: center center;
  position: relative;
  margin-bottom: 4px;

  .guang {
    position: absolute;
    bottom: -26px;
    width: 100%;
    height: 56px;
  }

  .zuojuxing,
  .youjuxing {
    position: absolute;
    top: -2px;
    width: 140px;
    height: 6px;
  }

  .zuojuxing {
    left: 11%;
  }

  .youjuxing {
    right: 11%;
    transform: rotate(180deg);
  }

  .timers {
    position: absolute;
    right: 0;
    top: 30px;
    font-size: 18px;
    display: flex;
    align-items: center;

    .setting_icon {
      width: 20px;
      height: 20px;
      cursor: pointer;
      margin-left: 12px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}

.additional-content {
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: 15px; /* Adds space between the span and new content */
}

.input-field {
  padding: 8px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
  width: 200px;
}

.text-label {
  font-size: 16px;
  color: #333;
}
.title_logo{
  position: relative;
  left: -55px;
}

.img-button {
  background: none;
  border: none;
  cursor: pointer;

  img {
    width: 130px;
    height: 60px;
  }
}
.input-field2{
  width: 160px;
}
.input-field1 {
  width: 120px; /* 调整宽度 */
  padding: 8px;
  font-size: 14px;
  border: none; /* 去掉外边框 */
  font-size: 18px; /* 增大字体 */
  border-radius: 4px;
}

.btn-container {
  position: relative;
  z-index: 10;
}
.btn-text_r {
  position: absolute;
  top: 50%;
  left: 10%;
  transform: translate(-50%, -50%);
  font-size: 16px;
  color: red;
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}
::v-deep .el-select__wrapper {
  border: 2px solid red !important;  /* 修改为红色边框 */
}
        
.btn {
  width: 120px;
  height: 50px;
  cursor: pointer;
}
.btn_r {
  width: 162px;
}

.btn-text {
  position: absolute;
  top: 50%;
  left: 40%;
  transform: translate(-50%, -50%);
  font-size: 16px;
  color: red;
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}

.btn-right {
  position: absolute;
  top: 7px;
  left: 1120px;
  display: flex;
  align-items: center; /* Ensures the new elements align horizontally with 子公司概况 */
}

.btn_f {
  display: flex;
  position: absolute;
  top: 2%;
  left: 0;
  margin-left: 30px;
}

.logo {
  z-index: 1;
  position: absolute;
  top: -39%;
  left: 39%;
  width: 550px;
  margin-left: 28px;
  .img1 {
    width: 79%;
    height: 110px;
  }
}

.title {
  position: relative;
  left: 45px;
  top: -8px;
  z-index: 2;
  text-align: center;
  color: transparent;
  height: 60px;
  line-height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;

  .title-text {
    font-size: 27px;
    font-weight: bold;
    letter-spacing: 6px;
    background: white;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
.router-link-active {
  /* 给选中的按钮加上特殊样式 */
  background-color: #f1f1f1;
}
</style>


